<template>
  <div class="page-content bg-gray-50 min-h-screen">
    <header class="bg-white shadow-sm sticky top-0 z-10">
      <div class="container mx-auto px-4 py-3 flex items-center">
        <router-link to="/tools" class="mr-3 p-1">
          <i class="fas fa-arrow-left text-gray-600"></i>
        </router-link>
        <h1 class="text-lg font-semibold">立案指引</h1>
      </div>
    </header>

    <main class="container mx-auto px-4 py-4">
      <!-- 标签页切换 -->
      <div class="grid grid-cols-3 gap-3 mb-6">
        <button 
          @click="activeTab = 'process'"
          class="bg-white rounded-lg p-4 text-center border-2 transition-all"
          :class="activeTab === 'process' ? 'border-blue-500 bg-blue-50' : 'border-gray-200 hover:border-gray-300'"
        >
          <div class="w-8 h-8 mx-auto mb-2 rounded-full flex items-center justify-center"
               :class="activeTab === 'process' ? 'bg-blue-500 text-white' : 'bg-gray-100 text-gray-600'">
            <i class="fas fa-list-ol text-sm"></i>
          </div>
          <span class="text-sm font-medium"
                :class="activeTab === 'process' ? 'text-blue-600' : 'text-gray-700'">
            立案流程
          </span>
        </button>

        <button 
          @click="activeTab = 'materials'"
          class="bg-white rounded-lg p-4 text-center border-2 transition-all"
          :class="activeTab === 'materials' ? 'border-blue-500 bg-blue-50' : 'border-gray-200 hover:border-gray-300'"
        >
          <div class="w-8 h-8 mx-auto mb-2 rounded-full flex items-center justify-center"
               :class="activeTab === 'materials' ? 'bg-blue-500 text-white' : 'bg-gray-100 text-gray-600'">
            <i class="fas fa-file-alt text-sm"></i>
          </div>
          <span class="text-sm font-medium"
                :class="activeTab === 'materials' ? 'text-blue-600' : 'text-gray-700'">
            材料清单
          </span>
        </button>

        <button 
          @click="activeTab = 'faq'"
          class="bg-white rounded-lg p-4 text-center border-2 transition-all"
          :class="activeTab === 'faq' ? 'border-blue-500 bg-blue-50' : 'border-gray-200 hover:border-gray-300'"
        >
          <div class="w-8 h-8 mx-auto mb-2 rounded-full flex items-center justify-center"
               :class="activeTab === 'faq' ? 'bg-blue-500 text-white' : 'bg-gray-100 text-gray-600'">
            <i class="fas fa-question-circle text-sm"></i>
          </div>
          <span class="text-sm font-medium"
                :class="activeTab === 'faq' ? 'text-blue-600' : 'text-gray-700'">
            常见问题
          </span>
        </button>
      </div>

      <!-- 立案流程内容 -->
      <div v-if="activeTab === 'process'" class="bg-white rounded-xl shadow-sm">
        <div class="p-4">
          <h2 class="text-lg font-semibold mb-4 flex items-center">
            <i class="fas fa-globe-asia text-blue-500 mr-2"></i>
            网上立案流程
          </h2>

          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-2">选择立案平台</label>
            <select 
              v-model="selectedPlatform"
              class="w-full p-3 border border-gray-300 rounded-lg"
            >
              <option value="人民法院在线服务">人民法院在线服务</option>
              <option value="移动微法院">移动微法院</option>
              <option value="12368诉讼服务平台">12368诉讼服务平台</option>
            </select>
          </div>

          <div class="space-y-4">
            <!-- 步骤1：实名认证 -->
            <div class="flex items-start p-4 bg-gray-50 rounded-lg">
              <div class="flex-shrink-0 w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center text-sm font-medium mr-4">1</div>
              <div class="flex-1">
                <h3 class="font-medium text-gray-900 mb-1">实名认证</h3>
                <p class="text-sm text-gray-600 mb-2">使用身份证进行实名认证，确保信息真实有效</p>
                <div class="text-xs text-blue-600">
                  <p class="font-medium mb-1">💡 温馨提示:</p>
                  <ul class="list-disc list-inside space-y-1">
                    <li>准备好清晰的身份证正反面照片</li>
                    <li>确保网络环境稳定</li>
                    <li>可使用手机扫码认证</li>
                  </ul>
                </div>
              </div>
            </div>

            <!-- 步骤2：选择法院 -->
            <div class="flex items-start p-4 bg-gray-50 rounded-lg">
              <div class="flex-shrink-0 w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center text-sm font-medium mr-4">2</div>
              <div class="flex-1">
                <h3 class="font-medium text-gray-900 mb-1">选择法院</h3>
                <p class="text-sm text-gray-600 mb-2">根据案件管辖权选择对应的人民法院</p>
                <div class="text-xs text-blue-600">
                  <p class="font-medium mb-1">💡 温馨提示:</p>
                  <ul class="list-disc list-inside space-y-1">
                    <li>可使用管辖权分析工具辅助选择</li>
                    <li>不确定时可咨询法院立案庭</li>
                  </ul>
                </div>
              </div>
            </div>

            <!-- 步骤3：在线填写起诉状 -->
            <div class="flex items-start p-4 bg-gray-50 rounded-lg">
              <div class="flex-shrink-0 w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center text-sm font-medium mr-4">3</div>
              <div class="flex-1">
                <h3 class="font-medium text-gray-900 mb-1">在线填写起诉状</h3>
                <p class="text-sm text-gray-600 mb-2">按照提示填写完整的起诉状信息</p>
                <div class="text-xs text-blue-600">
                  <p class="font-medium mb-1">💡 温馨提示:</p>
                  <ul class="list-disc list-inside space-y-1">
                    <li>仔细核对当事人信息</li>
                    <li>诉讼请求要明确具体</li>
                    <li>事实与理由要详实清楚</li>
                  </ul>
                </div>
              </div>
            </div>

            <!-- 步骤4：上传材料 -->
            <div class="flex items-start p-4 bg-gray-50 rounded-lg">
              <div class="flex-shrink-0 w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center text-sm font-medium mr-4">4</div>
              <div class="flex-1">
                <h3 class="font-medium text-gray-900 mb-1">上传材料</h3>
                <p class="text-sm text-gray-600 mb-2">上传起诉状、证据材料、身份证明等文件</p>
                <div class="text-xs text-blue-600">
                  <p class="font-medium mb-1">💡 温馨提示:</p>
                  <ul class="list-disc list-inside space-y-1">
                    <li>文件格式支持PDF、JPG等</li>
                    <li>单个文件不超过10MB</li>
                    <li>确保文件清晰可读</li>
                  </ul>
                </div>
              </div>
            </div>

            <!-- 步骤5：缴纳诉讼费 -->
            <div class="flex items-start p-4 bg-gray-50 rounded-lg">
              <div class="flex-shrink-0 w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center text-sm font-medium mr-4">5</div>
              <div class="flex-1">
                <h3 class="font-medium text-gray-900 mb-1">缴纳诉讼费</h3>
                <p class="text-sm text-gray-600 mb-2">在线计算并缴纳诉讼费用</p>
                <div class="text-xs text-blue-600">
                  <p class="font-medium mb-1">💡 温馨提示:</p>
                  <ul class="list-disc list-inside space-y-1">
                    <li>支持微信、支付宝等支付方式</li>
                    <li>保存好缴费凭证</li>
                    <li>诉讼费可在判决后退还或转移</li>
                  </ul>
                </div>
              </div>
            </div>

            <!-- 步骤6：等待审核 -->
            <div class="flex items-start p-4 bg-gray-50 rounded-lg">
              <div class="flex-shrink-0 w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center text-sm font-medium mr-4">6</div>
              <div class="flex-1">
                <h3 class="font-medium text-gray-900 mb-1">等待审核</h3>
                <p class="text-sm text-gray-600 mb-2">法院工作人员审核材料，决定是否立案</p>
                <div class="text-xs text-blue-600">
                  <p class="font-medium mb-1">💡 温馨提示:</p>
                  <ul class="list-disc list-inside space-y-1">
                    <li>审核时间一般为3-7个工作日</li>
                    <li>可在线查看审核进度</li>
                    <li>如有问题会电话联系补正</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>

      <!-- 材料清单内容 -->
      <div v-if="activeTab === 'materials'" class="bg-white rounded-xl shadow-sm">
        <div class="p-4">
          <h2 class="text-lg font-semibold mb-4 flex items-center">
            <i class="fas fa-file-alt text-green-500 mr-2"></i>
            立案材料清单
          </h2>

          <!-- 基础材料 -->
          <div class="mb-6">
            <h3 class="font-medium text-gray-900 mb-3 flex items-center">
              <i class="fas fa-star text-red-500 mr-2"></i>
              必备材料
            </h3>
            <div class="space-y-3">
              <div class="flex items-start p-3 bg-red-50 rounded-lg border-l-4 border-red-400">
                <div class="flex-shrink-0 w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center text-xs mr-3 mt-0.5">1</div>
                <div class="flex-1">
                  <h4 class="font-medium text-gray-900">起诉状</h4>
                  <p class="text-sm text-gray-600 mt-1">按照法定格式填写，包含当事人信息、诉讼请求、事实与理由</p>
                  <div class="text-xs text-red-600 mt-2">
                    <span class="font-medium">份数：</span>按被告人数+1份提交（如1个被告需要2份）
                  </div>
                </div>
              </div>

              <div class="flex items-start p-3 bg-red-50 rounded-lg border-l-4 border-red-400">
                <div class="flex-shrink-0 w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center text-xs mr-3 mt-0.5">2</div>
                <div class="flex-1">
                  <h4 class="font-medium text-gray-900">身份证明</h4>
                  <p class="text-sm text-gray-600 mt-1">原告身份证复印件，委托代理的需提供授权委托书</p>
                  <div class="text-xs text-red-600 mt-2">
                    <span class="font-medium">注意：</span>身份证正反面复印在同一张纸上
                  </div>
                </div>
              </div>

              <div class="flex items-start p-3 bg-red-50 rounded-lg border-l-4 border-red-400">
                <div class="flex-shrink-0 w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center text-xs mr-3 mt-0.5">3</div>
                <div class="flex-1">
                  <h4 class="font-medium text-gray-900">被告身份信息</h4>
                  <p class="text-sm text-gray-600 mt-1">被告身份证复印件或户籍证明、营业执照等</p>
                  <div class="text-xs text-red-600 mt-2">
                    <span class="font-medium">说明：</span>无法获取的需说明情况并提供其他证明材料
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 证据材料 -->
          <div class="mb-6">
            <h3 class="font-medium text-gray-900 mb-3 flex items-center">
              <i class="fas fa-folder-open text-blue-500 mr-2"></i>
              证据材料
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div class="p-3 bg-blue-50 rounded-lg">
                <h4 class="font-medium text-gray-900 mb-2">合同类案件</h4>
                <ul class="text-sm text-gray-600 space-y-1">
                  <li>• 合同原件或复印件</li>
                  <li>• 履行合同的相关证据</li>
                  <li>• 违约事实的证明材料</li>
                  <li>• 损失计算依据</li>
                </ul>
              </div>

              <div class="p-3 bg-blue-50 rounded-lg">
                <h4 class="font-medium text-gray-900 mb-2">侵权类案件</h4>
                <ul class="text-sm text-gray-600 space-y-1">
                  <li>• 侵权事实的证明</li>
                  <li>• 损害结果的证据</li>
                  <li>• 因果关系证明</li>
                  <li>• 医疗费票据等</li>
                </ul>
              </div>

              <div class="p-3 bg-blue-50 rounded-lg">
                <h4 class="font-medium text-gray-900 mb-2">债权类案件</h4>
                <ul class="text-sm text-gray-600 space-y-1">
                  <li>• 借条、欠条原件</li>
                  <li>• 转账凭证</li>
                  <li>• 催收证据</li>
                  <li>• 担保合同等</li>
                </ul>
              </div>

              <div class="p-3 bg-blue-50 rounded-lg">
                <h4 class="font-medium text-gray-900 mb-2">婚姻家庭案件</h4>
                <ul class="text-sm text-gray-600 space-y-1">
                  <li>• 结婚证或离婚证</li>
                  <li>• 户口本</li>
                  <li>• 子女出生证明</li>
                  <li>• 财产证明材料</li>
                </ul>
              </div>
            </div>
          </div>

          <!-- 特殊情况材料 -->
          <div class="mb-6">
            <h3 class="font-medium text-gray-900 mb-3 flex items-center">
              <i class="fas fa-exclamation-triangle text-yellow-500 mr-2"></i>
              特殊情况材料
            </h3>
            <div class="space-y-3">
              <div class="p-3 bg-yellow-50 rounded-lg border-l-4 border-yellow-400">
                <h4 class="font-medium text-gray-900">申请财产保全</h4>
                <p class="text-sm text-gray-600 mt-1">需提供担保书、担保财产证明、被保全财产线索</p>
              </div>

              <div class="p-3 bg-yellow-50 rounded-lg border-l-4 border-yellow-400">
                <h4 class="font-medium text-gray-900">申请先予执行</h4>
                <p class="text-sm text-gray-600 mt-1">需证明急需执行的理由和胜诉可能性</p>
              </div>

              <div class="p-3 bg-yellow-50 rounded-lg border-l-4 border-yellow-400">
                <h4 class="font-medium text-gray-900">委托代理</h4>
                <p class="text-sm text-gray-600 mt-1">授权委托书、代理人身份证明、律师执业证等</p>
              </div>
            </div>
          </div>

          <!-- 材料准备提醒 -->
          <div class="p-4 bg-green-50 rounded-lg border border-green-200">
            <h3 class="font-medium text-green-900 mb-2 flex items-center">
              <i class="fas fa-lightbulb mr-2"></i>
              材料准备提醒
            </h3>
            <ul class="text-sm text-green-700 space-y-1">
              <li>• 所有材料需按被告人数+1的份数准备</li>
              <li>• 证据材料需编制证据清单</li>
              <li>• 外文材料需提供中文翻译件</li>
              <li>• 复印件需加盖"与原件核对无误"印章或签字</li>
              <li>• 建议提前咨询法院立案庭确认材料要求</li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 常见问题内容 -->
      <div v-if="activeTab === 'faq'" class="bg-white rounded-xl shadow-sm">
        <div class="p-4">
          <h2 class="text-lg font-semibold mb-4 flex items-center">
            <i class="fas fa-question-circle text-purple-500 mr-2"></i>
            立案常见问题
          </h2>

          <div class="space-y-4">
            <!-- FAQ项目 -->
            <div 
              v-for="(faq, index) in faqList" 
              :key="index"
              class="border border-gray-200 rounded-lg overflow-hidden"
            >
              <button 
                @click="toggleFaq(index)"
                class="w-full p-4 text-left bg-gray-50 hover:bg-gray-100 transition-colors flex items-center justify-between"
              >
                <span class="font-medium text-gray-900">{{ faq.question }}</span>
                <i class="fas fa-chevron-down transition-transform duration-200"
                   :class="{ 'rotate-180': faq.isOpen }"></i>
              </button>
              <div v-show="faq.isOpen" class="p-4 bg-white border-t border-gray-200">
                <div class="text-sm text-gray-600 space-y-2" v-html="faq.answer"></div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  name: 'FilingGuide',
  data() {
    return {
      activeTab: 'process',
      selectedPlatform: '人民法院在线服务',
      faqList: [
        {
          question: '网上立案需要什么条件？',
          answer: `
            <p><strong>基本条件：</strong></p>
            <ul class="list-disc list-inside mt-2 space-y-1">
              <li>具备完全民事行为能力</li>
              <li>能够进行实名认证</li>
              <li>案件属于法院受理范围</li>
              <li>符合起诉条件</li>
            </ul>
            <p class="mt-3"><strong>技术条件：</strong></p>
            <ul class="list-disc list-inside mt-2 space-y-1">
              <li>具备上网条件和基本操作能力</li>
              <li>能够上传清晰的电子文档</li>
              <li>支持在线支付功能</li>
            </ul>
          `,
          isOpen: false
        },
        {
          question: '哪些案件不能网上立案？',
          answer: `
            <p>以下类型案件通常不支持网上立案：</p>
            <ul class="list-disc list-inside mt-2 space-y-1">
              <li>涉及国家秘密的案件</li>
              <li>群体性纠纷案件</li>
              <li>重大疑难复杂案件</li>
              <li>需要现场勘验的案件</li>
              <li>当事人不具备网上立案条件的案件</li>
              <li>法律法规规定不得网上立案的其他案件</li>
            </ul>
            <p class="mt-3 text-blue-600"><strong>建议：</strong>不确定是否可以网上立案时，建议先咨询法院立案庭。</p>
          `,
          isOpen: false
        },
        {
          question: '立案被驳回怎么办？',
          answer: `
            <p>立案被驳回后可以采取以下措施：</p>
            <ul class="list-disc list-inside mt-2 space-y-1">
              <li><strong>补正材料：</strong>根据法院要求补充完善相关材料</li>
              <li><strong>修改起诉状：</strong>按照法院意见修改起诉状内容</li>
              <li><strong>申请复议：</strong>对驳回决定不服的，可在10日内申请上级法院复议</li>
              <li><strong>重新起诉：</strong>消除驳回理由后重新提起诉讼</li>
            </ul>
            <p class="mt-3 text-red-600"><strong>注意：</strong>要在规定期限内采取救济措施，避免超过诉讼时效。</p>
          `,
          isOpen: false
        },
        {
          question: '诉讼费什么时候缴纳？',
          answer: `
            <p><strong>缴费时间：</strong></p>
            <ul class="list-disc list-inside mt-2 space-y-1">
              <li>网上立案：通常在提交材料时同时缴费</li>
              <li>现场立案：法院受理后7日内缴费</li>
              <li>申请缓交：可在规定期限内申请缓交、减交或免交</li>
            </ul>
            <p class="mt-3"><strong>缴费方式：</strong></p>
            <ul class="list-disc list-inside mt-2 space-y-1">
              <li>网上支付：支持微信、支付宝、银行卡等</li>
              <li>现场缴费：到法院财务部门缴费</li>
              <li>银行转账：按照法院指定账户转账</li>
            </ul>
          `,
          isOpen: false
        },
        {
          question: '可以申请法律援助吗？',
          answer: `
            <p>符合条件的当事人可以申请法律援助：</p>
            <p class="mt-2"><strong>申请条件：</strong></p>
            <ul class="list-disc list-inside mt-2 space-y-1">
              <li>经济困难，无力支付律师费用</li>
              <li>案件具有法律援助价值</li>
              <li>属于法律援助范围</li>
            </ul>
            <p class="mt-3"><strong>申请流程：</strong></p>
            <ul class="list-disc list-inside mt-2 space-y-1">
              <li>向当地法律援助中心提出申请</li>
              <li>提交经济困难证明和相关材料</li>
              <li>经审查符合条件的，指派律师提供援助</li>
            </ul>
          `,
          isOpen: false
        },
        {
          question: '立案后多久开庭？',
          answer: `
            <p>开庭时间根据程序类型而定：</p>
            <p class="mt-2"><strong>普通程序：</strong></p>
            <ul class="list-disc list-inside mt-2 space-y-1">
              <li>立案后一般1-3个月内开庭</li>
              <li>复杂案件可能需要更长时间</li>
              <li>法院会提前3日通知开庭时间</li>
            </ul>
            <p class="mt-3"><strong>简易程序：</strong></p>
            <ul class="list-disc list-inside mt-2 space-y-1">
              <li>立案后一般1个月内开庭</li>
              <li>程序简化，审理周期较短</li>
            </ul>
            <p class="mt-3 text-blue-600"><strong>提醒：</strong>具体开庭时间以法院通知为准，请保持联系方式畅通。</p>
          `,
          isOpen: false
        }
      ]
    }
  },
  methods: {
    toggleFaq(index) {
      this.faqList[index].isOpen = !this.faqList[index].isOpen
    }
  }
}
</script>

<style scoped>
/* 自定义样式可以在这里添加 */
</style>